<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/switch.css?01_38" />
		<!--公共js-->
		<script type="text/javascript" src="../common/js/jquery.js?01_38"></script>
		<script type="text/javascript" src="../common/js/fastclick.js?01_38"></script>
		
		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_38"></script>
		
		<script type="text/javascript" src="../common/js/common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/main.js?01_38"></script>
		<script type="text/javascript" src="../common/js/app.js?01_38"></script>
		<style>
			.my_or .none_msg{width: 100%}
			.my_or .none_img{width: 85px; margin: auto;}
			.my_or .none_msg .center{white-space:nowrap; margin: auto;}
		</style>
	</head>

	<body class="bg-f5f4f4">
		<header class="bg-red9 fff f-20 pad-t-10 pad-b-10  pad-r-10">
			<div class="pa back pad-l-10 re" onclick="back()">
				<div class="order_back"></div>
				<a></a>
			</div>
			<div class="center" data-l="1407"></div>
		</header>
		<div id="app" class="wrap_body my_or" v-cloak>
			<table class="title_3">
				<tbody>
					<tr class="f-18">
						<td @click="sle_page(2)" class="sel btn_c">{{b_lg[1408]}}</td>
						<td @click="sle_page(99)" class="btn_c">{{b_lg[1409]}}</td>
					</tr>
				</tbody>
			</table>
			<div style="height: 100px;"></div>
			<div class="order_box_list">
				<div v-for="(v,k) in result.list" @click="click_page(v.id)" class="ord_order_box bg-fff mag-b-10">
					<div>
						<div class="fiex mag-b-15 f-18">
							<div>{{v.name}}</div>
							<div class="fiex1">
								<div class="fr fiex">
									<div v-if="v.status==2" class="load mag-r-5"><img src="../images/yuyue.jpg" /></div>
									<div v-if="v.status!=2" class="load mag-r-5"><img src="../images/clos.jpg" /></div>
									<div v-if="v.status==2" class="c20e">{{b_lg[1408]}}</div>
									<div v-if="v.status!=2" class="c666">{{v.status|capitalize}}</div>
								</div>
							</div>
						</div>
						<div class="mag-b-5">
							<span class="f-15 c98">{{b_lg[1411]}} : </span>
							<span class="f-15 c98">{{v.time}}</span>
						</div>
						<div class="mag-b-5">
							<span class="f-15 c98">{{b_lg[1412]}} : </span>
							<span class="f-15 c98">{{v.people_count}}</span>
						</div>
						<div class="mag-b-5" style="word-wrap: break-word;">
							<span class="f-15 c98">{{b_lg[1413]}} : </span>
							<span class="f-15 c98">{{v.table}}</span>
						</div>
						<div class="mag-b-5">
							<span class="f-15 c98">{{b_lg[1292]}}: </span>
							<span class="f-15 c98">{{v.description}}</span>
						</div>
						<div class="mag-b-5">
							<span class="f-15 c98">{{b_lg[1414]}}: </span>
							<span class="f-15 c98">{{b_lg[1415]}}{{v.goods_count}} , {{b_lg[1416]}} {{v.goods_price}}</span>
						</div>
					</div>
				</div>
				<div class="center" v-if="lock==0"><i class="fa fa-spinner fa-pulse"></i></div>
				<div class="center pad-b-10" v-if="no_msg==1">{{b_lg[1425]}}</div>
			</div>
			<div v-if="result.list.length==0" class="none_msg">
				<div class="none_img">
					<img src="../images/no_order.png" />
				</div>
				<div class="center">{{b_lg[1410]}}</div>
			</div>
		</div>
		<script>
			var app = null

			function fun1() {
				setlange_obj(); //加载头部语言包
				app = new Vue({
					el: '#app',
					data: {
						result: {}, //接口返回的结果集合
						lock: "1", //下拉刷新默认可以开启
						sel_class: "", //记录选择的分类
						now_page: "1", //记录当前选择的页码(默认为第一页)
						sum_page: "", //记录返回的总页数
						no_msg: "0", //无更多消息提示语(默认为隐藏)
						b_lg: global_lange, //语言包
					},
					filters: {
						capitalize: function(value) {
							switch(value) {
								case '1':
									return global_lange['1339']
								case '2':
									return global_lange['1428']
								case '3':
									return global_lange['1429']
								case '4':
									return global_lange['1430']
								case '5':
									return global_lange['1431']
								case '6':
									return global_lange['1432']
							}
							return value.slice(5)
						}
					},
					mounted: function() { //添加下拉刷新事件
						th = this
						var winH = $(window).height(); //屏幕高度
						window.addEventListener('scroll', function(e) { //滚动事件
							var domH = $(".order_box_list").height(); //内容高度
							if((winH + $(window).scrollTop()) > domH - 10) {
								if(th.lock == 1) {
									if(th.now_page < th.sum_page) {
										th.lock = 0
										th.now_page++
											app.init()
									} else {
										th.no_msg = 1 //提示暂无更多消息
									}
								}
							}
						}, true)
					},
					methods: {
						init: function(e) { //首次加载调用方法

							common_ajax("1", {
								'page': app.now_page,
								'pagesize': 10,
								'status': e //默认为已预约
							}, "get_subscribe_list", function(h) { //获取桌面的详细信息
								//对于渲染后的结果进行拼接
								if(app.now_page != 1) { //当不是第一页的时候需要进行拼接
									$.each(h.result.list, function(k, v) {
										app.result.list.push(v)
									});
								} else {
									app.result = h.result; //存储接口的结果直接渲染
								}
								app.sum_page = h.result.total; //获取总页码数
								app.lock = 1 //数据加载完成后解锁下拉刷新功能
							})

						},
						sle_page: function(val) { //选择配置页
							app.sel_class = val //记录选择的是哪个分类
							app.now_page = 1 //每次切换分类将请求页码重置
							th.no_msg = 0 //将暂无消息提示语关闭
							$(window).scrollTop(0)
							var el = event.currentTarget;
							$(el).addClass("sel")
							$(el).siblings().removeClass("sel")
							app.init(val)
						},
						click_page:function(v){ //跳页
							clicked("order.html?id="+v)
						}
					}
				})
				app.init(2)
			}
		</script>
	</body>

</html>
